<config lang="json">
{
  navigationBarTitleText: '管理中心',
  usingComponents: {

  }
}
</config>

<template>
  <div class="page">
    <div class="admin-header-warpper page-header-warpper fixed-top d-flex justify-content-center">
      <div class="admin-header page-header">
        <div class="d-flex admin-header-content page-header-content">
          <div class="mr-auto d-flex">
            <div class="mr-2 position-relative">
              <img class="big-avatar"
                   :src="$globalData.userInfo.avatarUrl" />
              <img :src="'admin-icon.png'|imgUrl"
                   class="bottom-left-pos-icon"
                   alt="">
            </div>
            <div class="pl-1">
              <h1>{{$globalData.userInfo.nickName}}</h1>
              <span class="mr-2 font-small">{{role}}</span>
              <span class="font-small">{{user.area}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="admin-body page-body">
      <div class="tab-item"
           v-show="isShowTab(0)">
        <div class="box admin-teacher">
          <van-tabs type="card"
                    color="#454e67">

            <van-tab :title="yingxiaojingliString">
              <div class="admin-teacher-header d-flex justify-content-between  align-items-center  text-center">
                <div style="width:70px"
                     @click="orderyingxiao('yxmingcheng')">
                  <div>名称</div>
                  <van-icon :name="yxmingcheng" />
                </div>
                <div @click="orderyingxiao('yxdangqiantudi')">
                  <div>当前徒弟</div>
                  <van-icon :name="yxdangqiantudi" />
                </div>
                <div @click="orderyingxiao('yxleijitudi')">
                  <div>累计徒弟</div>
                  <van-icon :name="yxleijitudi" />
                </div>
                <div @click="orderyingxiao('yxleijipingjia')">
                  <div>累计评价</div>
                  <van-icon :name="yxleijipingjia" />
                </div>
                <div @click="orderyingxiao('yxdiqu')">
                  <div>地区</div>
                  <van-icon :name="yxdiqu" />
                </div>
              </div>
              <div class="admin-teacher-body">
                <scroll-view scroll-y
                             :style="{height:contentHeight+'px'}">

                  <div v-for="(item,i) in yingxiaojingliist"
                       :key="i"
                       class="admin-teacher-item d-flex justify-content-between align-items-center"
                       @click="onClick(item)">
                    <div class="d-flex align-items-center">
                      <img class="small-avatar mr-1"
                           :src="item.avatar | avatarUrl" />
                      <span>{{item.name}}</span>
                    </div>
                    <div>{{item.currentNum}}</div>
                    <div>{{item.totalNum}}</div>
                    <div class="d-flex align-items-center">
                      <img style="width:14px;height:16px"
                           class="mr-1"
                           :src="'xiaoxingxing.png'|imgUrl" />
                      <span>{{item.rating}}</span>
                    </div>
                    <div>
                      {{item.area}}
                    </div>
                  </div>

                </scroll-view>
              </div>
            </van-tab>

            <van-tab :title="xiangmuzongString">
              <div class="admin-teacher-header d-flex justify-content-between  align-items-center  text-center">
                <div style="width:70px"
                     @click="orderxm('xmmingcheng')">
                  <div>名称</div>
                  <van-icon :name="xmmingcheng" />
                </div>
                <div @click="orderxm('xmdangqiantudi')">
                  <div>当前徒弟</div>
                  <van-icon :name="xmdangqiantudi" />
                </div>
                <div @click="orderxm('xmleijitudi')">
                  <div>累计徒弟</div>
                  <van-icon :name="xmleijitudi" />
                </div>
                <div @click="orderxm('xmleijipingjia')">
                  <div>累计评价</div>
                  <van-icon :name="xmleijipingjia" />
                </div>
                <div @click="orderxm('xmdiqu')">
                  <div>地区</div>
                  <van-icon :name="xmdiqu" />
                </div>
              </div>
              <div class="admin-teacher-body">
                <scroll-view scroll-y
                             :style="{height:contentHeight+'px'}">

                  <div v-for="(item,i) in xiangmuzongList"
                       :key="i"
                       class="admin-teacher-item d-flex justify-content-between align-items-center"
                       @click="onClick(item)">
                    <div class="d-flex align-items-center">
                      <img class="small-avatar mr-1"
                           :src="item.avatar | avatarUrl" />
                      <span>{{item.name}}</span>
                    </div>
                    <div>{{item.currentNum}}</div>
                    <div>{{item.totalNum}}</div>
                    <div class="d-flex align-items-center">
                      <img style="width:14px;height:16px"
                           class="mr-1"
                           :src="'xiaoxingxing.png'|imgUrl" />
                      <span>{{item.rating}}</span>
                    </div>
                    <div>
                      {{item.area}}
                    </div>
                  </div>

                </scroll-view>
              </div>
            </van-tab>

          </van-tabs>
        </div>
      </div>
      <div class="tab-item"
           v-if="isShowTab(1)">
        <StudentAdmin :contentHeight="contentHeight"></StudentAdmin>
      </div>
      <div class="tab-item"
           v-if="isShowTab(2)">
        <AuditAdmin></AuditAdmin>
      </div>
    </div>

    <van-tabbar :active="active"
                @change="onChange"
                active-color="#FF790C"
                custom-class="custom-tab-bar">
      <van-tabbar-item>
        <image slot="icon"
               :src="'tabbar/teacher-default.png'|imgUrl"
               mode="aspectFit" />
        <image slot="icon-active"
               :src="'tabbar/teacher-active.png'|imgUrl"
               mode="aspectFit" />
        {{barTitles[0]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon"
               :src="'tabbar/student-default.png'|imgUrl"
               mode="aspectFit" />
        <image slot="icon-active"
               :src="'tabbar/student-active.png'|imgUrl"
               mode="aspectFit" />
        {{barTitles[1]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon"
               :src="'tabbar/shenhe-default.png'|imgUrl"
               mode="aspectFit" />
        <image slot="icon-active"
               :src="'tabbar/shenhe-active.png'|imgUrl"
               mode="aspectFit" />
        {{barTitles[2]}}
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import { AppUser } from '../utils/GlobalData'

import StudentAdmin from './pages/student-admin/index.vue'
import AuditAdmin from './pages/audit-admin/index.vue'

@Component({
  components: {
    StudentAdmin,
    AuditAdmin
  }
})
export default class AdminIndex extends Vue {
  @Action getTeacherAdmin;
  @Action getGradStudentAdmin;
  @Action getUnGradStudentAdmin;
  @Action getAuditAdmin;

  @Action updateAdminTaskStatus;

  public get user (): AppUser {
    return this.$globalData.appUser
  }

  public get role () {
    if (this.user.roles.indexOf('admin-super') !== -1) {
      return '超级管理员'
    }

    if (this.user.roles.indexOf('admin-group') !== -1) {
      return '集团管理员'
    }

    if (this.user.roles.indexOf('admin-area') !== -1) {
      return '地区管理员'
    }
  }

  public active = 0;
  public barTitles = ['师傅', '徒弟', '审核'];

  public updateTask (task) {
    this.updateAdminTaskStatus({
      taskId: task.id,
      studentId: task.studentId,
      status: task.status
    })
  }
  public onShow () {
    this.computeScrollViewHeight()
  }
  public contentHeight;
  public computeScrollViewHeight () {
    let that = this
    let query = wx.createSelectorQuery()
    let windowHeight = wx.getSystemInfoSync().windowHeight
    query
      .select('.page-header-warpper')
      .boundingClientRect(function (res) {
        that.contentHeight =
          windowHeight - res.bottom - 10 - 30 - 40 - 10 - 10 - 50
      })
      .exec()
  }

  public isShowTab (index) {
    return this.active === index
  }
  public async onChange (event) {
    this.active = event.detail
    Megalo.setNavigationBarTitle({ title: this.barTitles[event.detail] })
  }

  public async onReachBottom () {
    Megalo.showLoading({
      title: '加载中'
    })
    switch (this.active) {
      case 2:
        await this.getAuditAdmin()
        break
    }
    Megalo.hideLoading()
  }

  public get xiangmuzongString () {
    var count = !this.xiangmuzongList ? 0 : this.xiangmuzongList.length
    return '工程(' + count + ')'
  }

  public get yingxiaojingliString () {
    var count = !this.yingxiaojingliist ? 0 : this.yingxiaojingliist.length
    return '营销(' + count + ')'
  }
  public async created () {
    this.$globalData.updateTask = this.updateTask
    if (this.dataList === null) {
      await this.getTeacherAdmin()
    }
    this.yingxiaojingliist = this.dataList.filter(a => a.job === 0)
    this.xiangmuzongList = this.dataList.filter(a => a.job === 1)
  }
  public xiangmuzongList: any = null;

  public yingxiaojingliist: any = null;

  public get dataList () {
    if (!this.$store.state.admin.teachers) {
      return null
    }
    return this.$store.state.admin.teachers.items
  }

  public yxmingcheng = 'arrow-down';
  public yxdangqiantudi = 'arrow-down';
  public yxleijitudi = 'arrow-down';
  public yxleijipingjia = 'arrow-down';
  public yxdiqu = 'arrow-down';

  public xmmingcheng = 'arrow-down';
  public xmdangqiantudi = 'arrow-down';
  public xmleijitudi = 'arrow-down';
  public xmleijipingjia = 'arrow-down';
  public xmdiqu = 'arrow-down';

  public orderyingxiao (key) {
    if (this[key] === 'arrow-down') {
      this[key] = 'arrow-up'
    } else {
      this[key] = 'arrow-down'
    }
    var that = this

    this.yingxiaojingliist.sort(function (c, d) {
      var a = that[key] === 'arrow-up' ? c : d
      var b = that[key] === 'arrow-up' ? d : c
      if (key === 'yxmingcheng') {
        if (a.name < b.name) {
          return -1
        }
        if (a.name > b.name) {
          return 1
        }
      }
      if (key === 'yxdangqiantudi') {
        return a.currentNum - b.currentNum
      }

      if (key === 'yxleijitudi') {
        return a.totalNum - b.totalNum
      }

      if (key === 'yxleijipingjia') {
        return a.rating - b.rating
      }

      if (key === 'yxdiqu') {
        if (a.area < b.area) {
          return -1
        }
        if (a.area > b.area) {
          return 1
        }
      }
    })
  }

  public orderxm (key) {
    if (this[key] === 'arrow-down') {
      this[key] = 'arrow-up'
    } else {
      this[key] = 'arrow-down'
    }
    var that = this

    this.xiangmuzongList.sort(function (c, d) {
      var a = that[key] === 'arrow-up' ? c : d
      var b = that[key] === 'arrow-up' ? d : c
      if (key === 'xmmingcheng') {
        if (a.name < b.name) {
          return -1
        }
        if (a.name > b.name) {
          return 1
        }
      }
      if (key === 'xmdangqiantudi') {
        return a.currentNum - b.currentNum
      }

      if (key === 'xmleijitudi') {
        return a.totalNum - b.totalNum
      }

      if (key === 'xmleijipingjia') {
        return a.rating - b.rating
      }

      if (key === 'xmdiqu') {
        if (a.area < b.area) {
          return -1
        }
        if (a.area > b.area) {
          return 1
        }
      }
    })
  }
  public onClick (item) {
    Megalo.navigateTo({ url: '/admin/pages/teacher-admin/content?id=' + item.id + '&name=' + item.name })
  }
}
</script>

<style lang="stylus" >
.admin-header-warpper {
  width: 100%;
  height: $adminHeaderHeight;
  background: no-repeat url($cdn + 'admin-header-bg.png') #f7f7f7 center;
  background-size: 100% 100%;
  color: #fff;
}

.admin-header {
  margin-top: 12px;
}

.admin-body {
  padding: $adminHeaderHeight 0px $tabbarHeight 0px;
}

.admin-teacher {
  padding-top: 10px;
}

.admin-teacher-header {
  padding-top: 5px;
  height: 40px;
}

.admin-teacher-body {
  padding: 0px 0 10px;

  .admin-teacher-item {
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;
  }

  .admin-teacher-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .admin-teacher-item >._div:first-child {
    width: 90px;
  }
}
</style>
